<script setup>
import ArticleList from './list/index.vue'

const tabs = ref([
  { name: '全部', key: 'all', count: 0 },
  { name: '已发布', key: 'published', count: 0 },
  { name: '审核中', key: 'reviewing', count: 0 },
  { name: '未通过', key: 'rejected', count: 0 },
])
const activeTab = ref('all')
const articleList = ref([])
</script>

<template>
  <div class="wh-full">
    <div class="mb-10 w-full flex font-size-14 op-text us">
      <template v-for="(tab, index) in tabs" :key="tab.key">
        <div
          class="w-80 text-align-center cursor-pointer-text-hover"
          :class="{ 'text-[var(--el-color-primary)]': activeTab === tab.key }"
          @click="activeTab = tab.key"
        >
          {{ tab.name }} ({{ tab.count }})
        </div>
        <el-divider v-if="index < tabs.length - 1" direction="vertical" />
      </template>
    </div>
    <ArticleList :article-list="articleList" />
  </div>
</template>

<style scoped></style>
